import { useState } from "react"

function Handle(){


   
    const checkLogin=()=>{
        setLoginType(loginType=='login'?'code':'login');
    }
     

    const [state,setState]=useState(0);

    const [isShow,setIsShow]=useState(false);

    const [loading,setLoading]=useState(true);

    const [score]=useState(50);
    const getScore=()=>{

        if(score>=80){
            return <div>优秀</div>
        }
        else if(score>=60){
            return <div>及格</div>
        }
        else{   
            return <div>不及格</div>
        }
    }
    
    const [count,setCount] = useState(0);
    const [user,setUser]=useState<any>({
        name:'张三',
        age:18
    })

    const [list,setList]=useState([
        {id:1,name:'张三'},
        {id:2,name:'王五'},
        {id:3,name:'赵六'}
    ])

    const updateUser=()=>{
        setUser({...user,name:"李四"})
    }

    // console.log(1111111,useState(0));
    
    const update = ()=>{
        setCount(count+1)
    }
    const handleClick = ()=>{


        console.log('点击了')
    }
    const handleClick2= (data:string,e:any)=>{
        console.log('事件传参',data)
        console.log("事件对象",e);
        
    }
    return(
        <div>
            {
                loading && <div>正在加载</div>
            }
             <button onClick={()=>setLoading(false)}>加载完成</button>
            {

                 isShow &&  <div>弹窗 显示</div>

            }
           
            <div>
                  {state}
                   {
                    state==1 ? <div>通过</div> : <div>未通过</div>
                   }
                 
                 <button onClick={()=>setState(1)}>通过</button>
                 <button onClick={()=>setState(0)}>未通过</button>
            </div>

              {
                getScore()
              }

            
            <div>
                <ul>
                    {
                        list.map((item,index)=>{
                            return <li key={item.id}>{index}.{item.name}</li>
                        })
                    }
                     
                </ul>
            </div>

            <div>
                {user.name} {user.age}

                <button onClick={updateUser}>修改</button>
            </div>
             {count}

             <button onClick={update}>++</button>

            <button onClick={handleClick}>点击</button>
            <button onClick={(e)=>handleClick2('hello',e)}>事件传参</button>
            <button onClick={handleClick2.bind(null,'您好')}>bind事件传参</button>

            <div>

              
 

            </div>
        </div>
    )

}
export default Handle;